<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery2.0/jquery-2.0.0.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>

    <!-- 模态声明 -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">

        <!-- 窗口声明 -->
        <div class="modal-dialog" role="document">

          <!-- 内容声明 -->
          <div class="modal-content">

            <!-- 头部、主体、脚部 -->
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                哈哈哈哈哈
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" onclick="doClose()">保存</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <input type="button" class="btn btn-primary" value="使用按钮打开模态框" data-toggle="modal" data-target="#myModal">
      <a href="#myModal" class="btn btn-primary" data-toggle="modal">使用a标签打开模态窗口</a>
      <input type="button" class="btn btn-success" value="使用js的方式打开模态框" id="btnOpen">
      <script>
          $("#btnOpen").click(function(){
              $("#myModal").modal("show");//显示模态框
          });

          function doClose(){
            $("#myModal").modal("hide");//隐藏模态框
          }
      </script>
</body>
</html>